<template>
    <div class="spect-menu-open" v-if="!show" @click="show = !show">
        <div class="title-font">{{ $t('components.spect.60zduu0v1t00') }}</div>
    </div>
    <div class="spect-menu" v-else>
        <div class="title">
            <div class="title-font">{{ $t('components.spect.60zduu0v1t00') }}</div>
            <div class="delete"><icon-close @click="show = !show" /></div>
        </div>
        <a-scrollbar style="height:360px; overflow: auto;" class="info">
            <div class="top" v-for="(item, index) in (list as any)" :key="index" @click="formSpect.active = index"
                :class="{
                    active1: (formSpect.active == index) && !item.whiteUav?.customerName,
                    active2: (formSpect.active == index) && item.whiteUav?.customerName,
                }" :style="{ filter: (item?.online > 5) ? 'grayscale(100%)' : '' }">
                <div class="name-info">
                    <div class="basic-info">
                        <div class="top">
                            <!-- <div class="icon">
                                <icon-up @click.stop="formSpect.active = null" v-if="formSpect.active === index" />
                                <icon-down v-else />
                            </div> -->
                            <div class="name">
                                <div class="icon">
                                    <icon-up @click.stop="formSpect.active = null" v-if="formSpect.active === index" />
                                    <icon-down v-else />
                                </div>
                                <div>{{ useIdModelFormat(item.uavBasic.id).name }}</div>
                            </div>
                            <!-- <div class="name">
                                <span v-if="item.uavBasic.uavType === 1">{{ $t('components.spect.60zduu0v7gc0') }}</span>
                                <span v-else-if="item.uavBasic.uavType === 2">{{ $t('components.spect.60zduu0v7wo0')
                                    }}</span>
                                <span v-else-if="item.uavBasic.uavType === 3">{{ $t('components.spect.60zduu0v87o0')
                                    }}</span>
                                <span v-else-if="item.uavBasic.uavType === 4">{{ $t('components.spect.60zduu0v8j00')
                                    }}</span>fvcgp
                                <span v-else-if="item.uavBasic.uavType === 6">{{ $t('components.spect.60zduu0v91w0')
                                    }}</span>
                                <span v-else-if="item.uavBasic.uavType === 7">{{ $t('components.spect.60zduu0v9r00')
                                    }}</span>
                                <span v-else-if="item.uavBasic.uavType === 8">{{ $t('components.spect.60zduu0v9z80')
                                    }}</span>
                                <span v-else-if="item.uavBasic.uavType === 9">{{ $t('components.spect.60zduu0va740')
                                    }}</span>
                                <span v-else>{{ $t('components.spect.60zduu0vadk0') }}</span>
                            </div> -->
                            <div class="directed">
                                <div class="orientation">
                                    <a-button type="outline" v-if="item.uavLocation.lon && item.uavLocation.lat"
                                        @click="panTo(item)">
                                        {{ deviceSn == item.uavBasic.id ? $t('components.spect.61lhlweejz80') :
                                            $t('components.spect.60zduu0vam80') }}
                                    </a-button>
                                </div>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="bottom-botton">
                                <div class="id">{{ $t('components.spect.61lhlwegzo01') }}：{{
                                    item.whiteUav.uavNum ? item.whiteUav.uavNum : '暂未登记号牌' }}</div>
                                <!-- <div class="icon">
                                    <icon-up @click.stop="formSpect.active = null" v-if="formSpect.active === index" />
                                    <icon-down v-else />
                                </div> -->
                            </div>
                            <div class="heigh-info">
                                <div class="id">{{ $t('components.spect.61lhlwegzo06') }}：{{
                                    item.uavBasic.id ? item.uavBasic.id : '-' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="other-info">
                    <div class="identity" v-if="item.whiteUav.customerName">
                        <div class="name">{{ $t('components.spect.61lhlwegzo02') }}：{{ item.whiteUav.customerName }}
                        </div>
                        <div>{{ $t('components.spect.61lhlwegzo03') }}：{{ item.whiteUav.idCardNum }}</div>
                        <div>{{ $t('components.spect.61lhlwegzo04') }}：{{ item.whiteUav.address }}</div>
                        <div>{{ $t('components.spect.61lhlwegzo05') }}：{{ item.whiteUav.mobile }}</div>
                        <!-- <div class="company">单位：xxx股份有限公司</div> -->
                    </div>
                    <div class="heigh-info">
                        <div class="signal">
                            {{ $t('components.spect.60zduu0vax47') }}：{{ (getDistances(item.uavLocation.lon,
                                item.uavLocation.lat,
                                item.uavOperatorInfo.lon,
                                item.uavOperatorInfo.lat)) }}
                        </div>
                        <div class="signal">
                            N{{ item.uavLocation.direc }}°
                        </div>
                    </div>
                    <div class="heigh-info">
                        <div class="heigh">
                            <div class="altitude">{{ $t('components.spect.60zduu0v1x47') }}：{{ item.rssi }}
                            </div>
                            <div class="flight">{{ $t('components.spect.60zdu10vax47') }}：{{
                                Math.abs(item.uavLocation.height) }}m
                            </div>
                        </div>
                        <div class="speed">
                            <div class="distance">{{ $t('components.spect.60zdu00vax47') }}：{{ item.uavLocation.speedV
                                }}m/s</div>
                            <div class="flight">{{ $t('components.spect.60zdu00vax87') }}：{{ item.uavLocation.speedH
                                }}m/s</div>
                        </div>
                    </div>
                    <div class="position-info">
                        <div class="latitude">{{ $t('components.spect.60zdu00vax80') }}：{{
                            Number(item.uavLocation.lon.toFixed(4)) }},{{
                                Number(item.uavLocation.lat.toFixed(4)) }}</div>
                        <div class="position">
                            <div class="pliot">{{ $t('components.spect.60zduu0vax40') }}：{{
                                Number(item.uavOperatorInfo.lon.toFixed(4)) }},{{
                                    Number(item.uavOperatorInfo.lat.toFixed(4)) }}</div>
                            <div class="pliot-position"><a-button type="outline"
                                    v-if="item.uavOperatorInfo.lon && item.uavOperatorInfo.lat"
                                    @click="panTo(item,2)">{{
                                        $t('components.spect.60zduu0vax40') }}</a-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a-scrollbar>
    </div>
</template>
<script lang='ts' setup>
import { defineModel } from 'vue'
import { useIdModelFormat } from "@/hooks/comparison";
import { getDistances } from "@/hooks/distance";
const show = ref(true)
const emit = defineEmits(['panTo'])
const deviceSn = defineModel('deviceSn')
const formSpect = reactive({
    active: null,
} as any)
//无人机列表（父传子：接收）
const list = defineModel('list', { default: [] })
const panTo = (item: any,type=1) => {
    if (!item.uavLocation.lon || !item.uavLocation.lat) return useMessage.warning(t('components.spect.61lhlwegzo00'))
    emit('panTo', item, type)
}
const showDetail = (id: any) => {
    let index = list.value.findIndex((item: any) => item.uavBasic.id == id)
    if (index == -1) return
    formSpect.active = index
}
defineExpose({
    showDetail
})

// 无人机点击详情展开

</script>
<style scoped lang="less">
.spect-menu-open {
    width: 160px;
    height: 60px;
    background-image: url('@/assets/images/hidden-wanzhou.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: 5px;
    border: 1px solid rgba(46, 116, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;

    .title-font {
        font-family: YouSheBiaoTiHei;
        opacity: 1;
        /** 文本1 */
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.48px;
        line-height: 24px;
        vertical-align: middle;
        background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.spect-menu {
    // width: 100%;
    width: 300px;
    border-radius: 5px;

    .title {
        width: 100%;
        height: 59px;
        background-image: url('@/assets/images/index-menue-title.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;

        .title-font {
            margin-left: 10px;
            font-family: YouSheBiaoTiHei;
            opacity: 1;
            /** 文本1 */
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 0.48px;
            line-height: 24px;
            vertical-align: middle;
            background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }



        .delete {
            width: 35px;
            cursor: pointer;
            font-weight: 600;
            color: rgba(75, 127, 239, 1);
        }
    }

    .info {
        >div {
            border: 1px solid rgba(46, 116, 255, 0.8);
            margin-bottom: 10px;
            background: rgba(15, 19, 41, 0.85);
            color: #fff;
            cursor: pointer;
            border-radius: 5px;

            >.name-info {
                padding: 10px;
                display: flex;
                align-items: center;

                >.basic-info {
                    margin-left: 4px;
                    width: 100%;

                    .orientation {
                        :deep(.arco-btn-outline) {
                            color: rgba(0, 235, 43, 1);
                            border: 1px solid rgba(0, 235, 43, 1);
                        }
                    }

                    .pliot-position {
                        :deep(.arco-btn-outline, .arco-btn-outline[type='button']) {
                            color: rgba(36, 189, 255, 1) !important;
                            border: 1px solid rgba(36, 189, 255, 1) !important;
                        }
                    }

                    .top {
                        height: 40px;
                        margin-bottom: 8px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        >.directed {
                            // width: 55%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                        }

                        >.name {
                            font-size: 16px;
                            font-weight: 600;
                            display: flex;

                            >div {
                                display: flex;
                            }
                        }
                    }

                    .bottom {
                        .bottom-botton {
                            width: 100%;
                            margin-bottom: 10px;
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                }

            }

            >.other-info {
                height: 0;
                transition: height 0.3s;
                overflow: hidden;

                >.identity {

                    >div {
                        margin-bottom: 10px;
                        padding-left: 14px;
                    }

                    >.name {
                        margin-left: 28px;
                    }

                    >.company {
                        margin-left: 28px;
                        padding-bottom: 15px;
                        margin-bottom: 0;
                    }
                }

                >.heigh-info {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 14px;
                    height: 22px;

                    >div {
                        height: 30px;
                        line-height: 30px;
                    }
                }

                .position {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .pliot{
                        padding-left: 6px;
                    }
                }

                >.position-info {
                    padding: 0 10px;
                    margin-top: 36px;
                    height: 40px;

                    >.latitude {
                        height: 20px;
                        padding: 0 19px;
                    }
                }
            }

            &.active1 {
                .other-info {
                    height: 140px;
                }
            }

            &.active2 {
                .other-info {
                    height: 247px;
                }
            }
        }
    }

    :deep(.arco-btn-size-medium) {
        padding: 0 8px !important;
        height: 26px;
        border-radius: 4px;
    }

    :deep(.arco-scrollbar-thumb:hover) {
        height: 30% !important;
        opacity: 0.3;
    }

    :deep(.arco-scrollbar-thumb) {
        height: 30% !important;
        opacity: 0;
    }

    .orientation {
        :deep(.arco-btn-outline) {
            color: rgba(0, 235, 43, 1);
            border: 1px solid rgba(0, 235, 43, 1);
        }
    }

    .pliot-position {
        :deep(.arco-btn-outline, .arco-btn-outline[type='button']) {
            color: rgba(36, 189, 255, 1) !important;
            border: 1px solid rgba(36, 189, 255, 1) !important;
        }
    }

}
</style>